<template>
  <a-layout>
    <a-layout-header class="back-color">
<!--      <a-row type="flex" justify="center">
        <a-col :span="22">
          <div class="banner-occlude">
            <div class="marquee">
              <div>
                <span>{{marqueeFont}}</span>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>-->
    </a-layout-header>
    <a-layout-content class="back-color">
      <service/>
      <news/>
      <big-data/>
      <great-site/>
      <shop/>
      <train/>
      <Anchor/>
    </a-layout-content>
  </a-layout>
</template>
<script>

import BigData from '~/components/body/BigData'
import GreatSite from '~/components/body/GreatSite'
import Shop from '~/components/body/Shop'
import News from '~/components/body/News'
import Service from '~/components/body/Service'
import Train from '~/components/body/Train'
import Anchor from '~/components/anchor/Anchor'

export default {
  name: "Body",
  data() {
    return {
      marqueeFont: '益农信息社,农民好帮手'
    }
  },
  components: {
    BigData,
    GreatSite,
    Shop,
    News,
    Service,
    Train,
    Anchor
  }
}
</script>

<style lang="scss" scoped>

.banner-occlude {
  border-radius: 0.35em;
  margin-top: -2.7em;
  width: 100%;
  height: 6em;
  background-color: #ffffff;
}

.back-color {
  background-color: rgb(240, 240, 240);
  margin-top: -2em;
}


.marquee {
  height: 6em;
  color: green;
  font-size: 2.5em;
  letter-spacing: 0.2em;
  box-sizing: border-box;
  word-break: break-all;
  white-space: nowrap;

  div {
    overflow: hidden;
  }

  span {
    display: inline-block;
    padding-left: 100%;  /* 从右至左开始轮播 */
    -webkit-animation: marquee 16s linear infinite;
    animation: marquee 16s linear infinite;
    margin-top: 0.2em;
  }
  span:hover { /* 鼠标点击时暂停轮播 */
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
  }
}

/* Make it move */
@-webkit-keyframes marquee {
  0%   { -webkit-transform: translate(0, 0); }
  100% { -webkit-transform: translate(-100%, 0); }
}
@keyframes marquee {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

</style>
